import { Query } from '@/utils/Query.js'
export default function (map, number, localtion) {
  var clickFeature = null
  var popup = null
  const openMonitor = (map, number, localtion) => {
    let url = 'gdbp://MapGisLocal/wuhan/sfcls/摄像头'
    Query.queryByLayerUrl({
      url,
      callback: querySuccess,
    })

    function querySuccess(result) {
      //停止进度条
      //初始化Zondy.Format.PolygonJSON类
      var format = new Zondy.Format.PolygonJSON()
      //将MapGIS要素JSON反序列化为ol.Feature类型数组
      var features = format.read(result)
      /* 将查询到的要素高亮显示 */
      let source = new ol.source.Vector({
        wrapX: false,
      })
      source.addFeatures(features)
      let layer = new ol.layer.Vector({
        source,
        style: new ol.style.Style({
          image: new ol.style.Icon({
            src: '@/../shexiangtou.svg',
            anchor: [0.5, 0.8],
          }),
        }),
      })
      map.value.addLayer(layer)
      // 监听地图层级变化
      map.value.getView().on('change:resolution', function () {
        var style = layer.getStyle()
        // 重新设置图标的缩放率，基于层级10来做缩放
        style.getImage().setScale(this.getZoom() / 10)
        layer.setStyle(style)
      })

      var container = document.getElementById('popup')
      var content = document.getElementById('popup-content')
      var closer = document.getElementById('popup-closer')
      popup = new ol.Overlay({
        //要转换成overlay的HTML元素
        element: container,
        //当前窗口可见
        autoPan: true,
        //Popup放置的位置
        positioning: 'bottom-center',
        //是否应该停止事件传播到地图窗口
        stopEvent: true,
        autoPanAnimation: {
          //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
          duration: 250,
        },
      })
      map.value.addOverlay(popup)
      //添加关闭按钮的单击事件（隐藏popup）
      closer.onclick = function () {
        //未定义popup位置
        popup.setPosition(undefined)
        //失去焦点
        closer.blur()
        return false
      }
      clickFeature = function (e) {
        // 获取当前点击的点是否存在要素, 并返回
        const feature = map.value.forEachFeatureAtPixel(
          e.pixel,
          function (feature, layer) {
            return feature
          }
        )
        if (feature) {
          if (popup.getPosition() == undefined) {
            number.value = feature.values_.values_['编号']
            localtion.value = feature.values_.values_['位置']
            var position = feature.getGeometry().flatCoordinates
            popup.setPosition(position)
          }
        }
      }
      map.value.on('click', clickFeature)

      map.value.on('pointermove', function (e) {
        var pixel = map.value.getEventPixel(e.originalEvent)
        var hit = map.value.hasFeatureAtPixel(pixel)
        map.value.getTargetElement().style.cursor = hit ? 'pointer' : ''
      })
    }
  }

  const closeMonitor = (map) => {
    map.value.getLayers().array_.splice(5, 1)
    map.value.render()
    map.value.un('click', clickFeature)
    popup.setPosition(undefined)
  }
  return { openMonitor, closeMonitor }
}
